<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
								style="width: 160px"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<!-- multiple
								collapse-tags -->
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								clearable
								filterable
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="城市">
							<cl-select
								v-model="search.city_id"
								placeholder="请选择"
								filterable
								clearable
								style="width: 150px"
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in cityList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="门店">
							<cl-shop-select
								v-model="search.shop_id"
								:multiple-limit="10"
								placeholder="全部"
								filterable
								clearable
								:biz_id="search.biz_id"
							/>
						</cl-filter>
						<cl-filter label="接收部门">
							<cl-cascader
								clearable
								v-model="search.after_dept_id"
								:options="deptList"
								:props="{
									value: 'dept_id',
									label: 'dept_name'
								}"
								filterable
								style="width: 100%"
								@change="changeDept"
							/>
						</cl-filter>
						<cl-filter label="接收人">
							<cl-select
								v-model="search.get_user_id"
								placeholder="请选择"
								clearable
								style="width: 100%"
							>
								<el-option
									v-for="item in userList"
									:key="item.user_id"
									:label="item.user_name"
									:value="item.user_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								value-format="yyyy-MM-dd"
								style="width: 100%"
								:clearable="false"
							/>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<!-- <div class="mr-1">

					</div> -->
					<!-- <cl-table-handle @export-file="exportFile" :isShow="false" /> -->
				</el-row>
			</template>
			<!-- 数据表格 -->
			<!-- <cl-table v-bind="table"> -->

			<cl-data-table
				ref="table"
				id="shopDayInfo"
				v-bind="table"
				:page.sync="table.page"
				:limit.sync="table.limit"
				:loading="loading"
			>
				<cl-empty slot="empty" />
				<template #column-customer="{ scope: { row } }">
					<cl-customer
						:gender="row.cus_sex"
						:name="row.cus_name"
						:mobile="row.cus_mobile"
						:wechat="row.cus_wx || '-'"
						:avatar="row.cus_img"
					/>
				</template>
				<template #column-pot="{ scope: { row } }">
					<el-button type="primary" @click="openDetail(row)"> 客户详情 </el-button>
					<el-button type="warning" @click="callPhone(row)">拨打电话</el-button>
					<el-button type="success" @click="openFollowForm(row)">跟踪</el-button>
				</template>
			</cl-data-table>
			<!-- </cl-table> -->
			<!-- <template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<zm-pagination />
				</el-row>
			</template> -->
		</cl-pagefull>

		<follow-form ref="followForm" :detail="followDetail"></follow-form>
		<make-call-dialog ref="makeCallDialog" :detail="followDetail"></make-call-dialog>
	</cl-crud>
</template>
<script>
import { delEmptyChildren } from "@/utils";
import FollowForm from "@/cool/modules/customer/components/customer-detail/components/follow-form.vue";
import MakeCallDialog from "@/cool/modules/customer/components/customer-detail/components/make-call.vue";
import { exportExcelCoustom } from "@/utils/excel";
import dayjs from "dayjs";

const tableColumn = [
	{
		label: "客户信息",
		prop: "customer",
		minWidth: 210,
		align: "left",
		showOverflowTooltip: true,
		fixed: true
	},
	{ label: "性别", prop: "cus_sex", width: 100 },
	{ label: "会员号", width: 100, prop: "cus_id" },
	{ label: "下定日期", prop: "deposit_date", minWidth: 150, align: "left" },
	{
		label: "所属事业部",
		prop: "biz_name",
		minWidth: 150,
		align: "left",
		showOverflowTooltip: true
	},
	{ label: "所属品牌", prop: "bra_name", minWidth: 150, align: "left" },
	{
		label: "预约门店",
		prop: "date_name",
		minWidth: 120,
		align: "left",
		showOverflowTooltip: true
	},
	{ label: "预约日期", prop: "appoint_date", width: 120 },
	{ label: "预约人员", prop: "add_user_name", width: 120 },
	{ label: "排店人员", prop: "order_date_name_user", width: 120 },
	{
		label: "操作",
		prop: "pot",
		align: "center",
		width: 280,
		fixed: "right"
	}
];

export default {
	components: {
		FollowForm,
		MakeCallDialog
	},
	inject: ["$layout"],
	data() {
		return {
			loading: false,
			followDetail: null,

			search: {
				biz_id: "",
				bra_id: "",
				shop_id: "",
				city_id: "",
				get_user_id: "", //接收人员id
				after_dept_id: [],
				date: dayjs().format("YYYY-MM-DD")
			},
			pageObj: {
				currentPage: 1,
				pageSize: 20
			},
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				page: 1,
				limit: 20,
				data: [],
				autoPage: true,
				full: true,
				columns: [
					// {
					// 	type: "selection",
					// 	align: "center",
					// 	width: "50"
					// },
					...tableColumn
				]
			},
			selArr: [],
			cityList: [],
			userList: [],
			deptList: []
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();

		this.init()
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.deposit)
				.set("dict", {
					api: {
						page: "fifteenDay"
					}
				})
				.done();
			app.refresh(this.search);
		},
		async onRefresh(params, { next, render }) {
			this.loading = true;
			const data = await next(params).done(() => {
				this.loading = false;
			});
			console.log(params, data);
			// this.pageObj = {
			// 	currentPage: params.page,
			// 	pageSize: params.size
			// };

			this.table.data = data;
			// render(data);
			this.$nextTick(() => {
				this.$refs.table && this.$refs.table?.doLayout?.();
			});
			// render(data);
		},
		// crud刷新
		refresh(reset = true) {
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
		},
		isgetChange() {
			this.refresh();
		},
		//事业部切换
		changeBiz() {
			this.search.bra_id = "";
			this.search.shop_id = "";
			this.search.city_id = "";
			this.search.after_dept_id = [];
			this.search.get_user_id = "";

			this.init();
			this.refresh();
		},

		async init() {
			const { biz_id } = this.search;
			// this.getBizRefBrand(biz_id);
			this.updateBizRefData(biz_id);
			this.getCityList();

			this.deptList = delEmptyChildren(
				(await this.$store.dispatch("common/getDept", {
					biz_id,
					post: 2,
					needAll: false,
					needCascader: true
				})) || []
			);
		},
		openDetail(row) {
			this.$layout.openCusDetail(row, "new-appoint");
		},
		openFollowForm(row) {
			this.followDetail = row;
			setTimeout(() => {
				this.$refs.followForm.open();
			});
		},
		callPhone(row) {
			this.followDetail = row;
			setTimeout(() => {
				this.$refs.makeCallDialog.open();
			});
		},
		async getCityList() {
			const { biz_id } = this.search;
			this.$service.spread.newGetbizcity({ biz_id, user_manager: 1 }).then(data => {
				let list = (data || []).map(v => ({ ...v, label: v.name, value: v.id }));
				this.cityList = list;
			});
		},
		changeDept() {
			this.search.get_user_id = "";
			this.getManageDeptUser();
		},
		// 获取接收人
		async getManageDeptUser() {
			const { after_dept_id, biz_id } = this.search;
			// if (Array.isArray(dept_id)) {
			// 	dept_id = dept_id.join();
			// }
			this.userList = [];
			const data = await this.$service.user.deptuserlists({
				biz_id,
				dept_id: after_dept_id[1],
				post: 2
			});
			this.userList = data;
		},
		// 打印
		exportFile() {
			exportExcelCoustom("我的线索", this.selArr, tableColumn);
		}
	}
};
</script>
<style></style>
